<template>
  <div class="padding-16">
    <a-card class="general-card" title="会员列表">

      <a-form
        ref="refSearchForm"
        :model="searchForm"
        auto-label-width
      >
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="username" label="用户名">
              <a-input v-model="searchForm.username" placeholder="请输入用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="status" label="状态">
              <a-select v-model="searchForm.status" :options="statusOptions" placeholder="全部" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-space :size="16">
                <a-button type="primary" @click="onPageChange(1)">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="$refs.refSearchForm.resetFields()">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-divider style="margin-top: 0" />

<!--      <a-space style="margin-bottom: 16px">-->
<!--        <a-button type="primary" @click="$router.push({name: 'ContentArticleCreate'})">-->
<!--          <template #icon>-->
<!--            <icon-plus />-->
<!--          </template>-->
<!--          新建-->
<!--        </a-button>-->
<!--      </a-space>-->

      <a-table
        bordered
        row-key="id"
        :data="tableData"
        :loading="pageLoading"
        :pagination="pageValue"
        @page-change="onPageChange"
      >
        <template #columns>
          <a-table-column title="用户名称" data-index="username"></a-table-column>
          <a-table-column title="昵称" data-index="nickname"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{ record }">
              <a-tag v-if="record.status === 0" color="warning">停用</a-tag>
              <a-tag v-if="record.status === 1" color="success">正常</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="排序" data-index="sort"></a-table-column>
          <a-table-column title="备注" data-index="remark"></a-table-column>
          <a-table-column title="创建时间" data-index="create_time"></a-table-column>
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-button type="text"
                        @click="$router.push({name: 'ArticleCreate', query: {id: scope.row.id}})">编辑</a-button>
              <a-popconfirm content="删除后不可恢复，确定要删除吗？" @ok="handleDelete(record)">
                <a-button type="text" status="danger">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, computed, onMounted} from "vue";
import UserAPI from "@/api/user";

const generateFormModel = () => {
  return {
    username: "",
    status: ""
  };
};

const searchForm = ref(generateFormModel());

const statusOptions = computed(() => [
  {
    label: "已上线",
    value: 1
  },
  {
    label: "已下线",
    value: 2
  }
]);


const pageLoading = ref(false);
const tableData = ref([]);
const pageValue = reactive({
  pageSize: 50,
  current: 1,
  total: 0
});

async function fetchTableData(extraParam = {}) {
  pageLoading.value = true;
  try {
    let params = {
      ...pageValue,
    }
    if (extraParam) {
      params = {
        ...params,
        ...extraParam
      }
    }
    const {code, data, page, total} = await UserAPI.getList(params)

    if (code === 200 && data) {
      tableData.value = data || []
      pageValue.current = page || 1
      pageValue.total = total || 0
    }
  } catch (err) {
    console.warn(err)
  }
  pageLoading.value = false;
}

const onPageChange = (current: number) => {
  fetchTableData({ current });
};

onMounted(() => {
  fetchTableData()
})
</script>

<script lang="ts">
export default {
  name: "ArticleList"
};
</script>

<style scoped lang="less">

</style>
